<template>
  <div>
    <el-form label-position="top" :model="podSpec" :disabled="readonly">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item
            :label="$t('business.workload.dns_policy')"
            prop="dnsPolicy"
          >
            <ko-data-item
              v-model="podSpec.dnsPolicy"
              itemType="radio"
              :radios="options.dns_policy_list"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="hostIPC" prop="hostIPC">
            <ko-data-item
              v-model="podSpec.hostIPC"
              itemType="radio"
              :radios="options.yes_no_list"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="hostNetwork" prop="hostNetwork">
            <ko-data-item
              v-model="podSpec.hostNetwork"
              itemType="radio"
              :radios="options.yes_no_list"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="hostPID" prop="hostPID">
            <ko-data-item
              v-model="podSpec.hostPID"
              itemType="radio"
              :radios="options.yes_no_list"
              @change="checkHostDnsValid('hostPID')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="shareProcessNamespace"
            prop="shareProcessNamespace"
          >
            <ko-data-item
              v-model="podSpec.shareProcessNamespace"
              itemType="radio"
              :radios="options.yes_no_list"
              @change="checkHostDnsValid('shareProcessNamespace')"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <span>{{ $t("business.workload.nameservers") }}</span>
          <table style="width: 100%; margin-top: 10px" class="tab-table">
            <tr v-for="(row, index) in dnsNameServers" :key="index">
              <td width="90%">
                <ko-data-item
                  v-model="row.server"
                  placeholder="e.g. 1.1.1.1"
                  itemType="input"
                />
              </td>
              <td>
                <el-button
                  type="text"
                  style="font-size: 10px"
                  @click="handleNameserversDelete(index)"
                >
                  {{ $t("commons.button.delete") }}
                </el-button>
              </td>
            </tr>
            <tr>
              <td align="left">
                <el-button @click="handleNameserversAdd"
                  >{{ $t("business.workload.add")
                  }}{{ $t("business.workload.nameservers") }}</el-button
                >
              </td>
            </tr>
          </table>
        </el-col>
        <el-col :span="12">
          <span>{{ $t("business.workload.searches") }}</span>
          <table style="width: 100%; margin-top: 10px" class="tab-table">
            <tr v-for="(row, index) in searches" :key="index">
              <td width="90%">
                <ko-data-item
                  v-model="row.search"
                  placeholder="e.g. mycompany.com"
                  itemType="input"
                />
              </td>
              <td>
                <el-button
                  type="text"
                  style="font-size: 10px"
                  @click="handleSearchesDelete(index)"
                >
                  {{ $t("commons.button.delete") }}
                </el-button>
              </td>
            </tr>
            <tr>
              <td align="left">
                <el-button @click="handleSearchesAdd"
                  >{{ $t("business.workload.add")
                  }}{{ $t("business.workload.searches") }}</el-button
                >
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="12">
          <label>{{ $t("business.workload.dns_resolver") }}</label>
          <table style="width: 100%" class="tab-table">
            <tr>
              <th scope="col" width="43%" align="left">
                <label>{{ $t("business.workload.key") }}</label>
              </th>
              <th scope="col" width="43%" align="left">
                <label>{{ $t("business.workload.value") }}</label>
              </th>
              <th align="left" />
            </tr>
            <tr v-for="(row, index) in dnsOptions" :key="index">
              <td>
                <ko-data-item
                  v-model="row.name"
                  placeholder="e.g. foo"
                  itemType="input"
                />
              </td>
              <td>
                <ko-data-item
                  v-model="row.value"
                  placeholder="e.g. bar"
                  itemType="input"
                />
              </td>
              <td>
                <el-button
                  type="text"
                  style="font-size: 10px"
                  @click="handleOptionsDelete(index)"
                >
                  {{ $t("commons.button.delete") }}
                </el-button>
              </td>
            </tr>
            <tr>
              <td align="left">
                <el-button @click="handleOptionsAdd"
                  >{{ $t("business.workload.add") }}
                  {{ $t("business.workload.dns_resolver") }}</el-button
                >
              </td>
            </tr>
          </table>
        </el-col>
        <el-col :span="12">
          <label>{{ $t("business.workload.host_aliases") }}</label>
          <table style="width: 100%" class="tab-table">
            <tr>
              <th scope="col" width="43%" align="left">
                <label>{{ $t("business.workload.ip_address") }}</label>
              </th>
              <th scope="col" width="43%" align="left">
                <label>{{ $t("business.workload.host_aliases") }}</label>
              </th>
              <th align="left" />
            </tr>
            <tr v-for="(row, index) in hostAlias" v-bind:key="index">
              <td>
                <ko-data-item
                  v-model="row.ip"
                  placeholder="e.g. 1.1.1.1"
                  itemType="input"
                />
              </td>
              <td>
                <ko-data-item
                  v-model="row.hostNames"
                  placeholder="e.g. foo.com,bar.com"
                  itemType="input"
                />
              </td>
              <td>
                <el-button
                  type="text"
                  style="font-size: 10px"
                  @click="handleAliasDelete(index)"
                >
                  {{ $t("commons.button.delete") }}
                </el-button>
              </td>
            </tr>
            <tr>
              <td align="left">
                <el-button @click="handleAliasAdd">
                  {{ $t("business.workload.add")
                  }}{{ $t("business.workload.host_aliases") }}
                </el-button>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="12">
          <el-form-item
            :label="$t('business.workload.hostname')"
            prop="hostname"
          >
            <ko-data-item
              v-model="podSpec.hostname"
              placeholder="hostname"
              itemType="input"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('business.workload.sub_domain')"
            prop="subdomain"
          >
            <ko-data-item
              v-model="podSpec.subdomain"
              placeholder="subdomain"
              itemType="input"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { PodSpec, PodTemplateSpec } from "@/views/domain/kubeHud/api/k8s";
import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";
import { ElNotification } from "element-plus";
import { computed, onMounted, reactive, ref } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const podSpec = defineModel<PodSpec>("podSpec");
type Prop = {
  readonly?: boolean;
};
const props = defineProps<Prop>();

const options = reactive({
  yes_no_list: [
    { label: t("business.workload.yes"), value: true },
    { label: t("business.workload.no"), value: false }
  ],
  dns_policy_list: [
    { label: "Default", value: "Default" },
    { label: "ClusterFirst", value: "ClusterFirst" },
    { label: "None", value: "None" },
    { label: "ClusterFirstWithHostNet", value: "ClusterFirstWithHostNet" }
  ]
});

const hostAlias = ref<{ ip: string; hostNames: string }[]>([]);
const dnsNameServers = ref<{ server: string }[]>([]);
const searches = ref<{ search: string }[]>([]);
const dnsOptions = computed(() => {
  return podSpec.value.dnsConfig?.options ?? [];
});

const handleSearchesDelete = (index: number) => {
  searches.value.splice(index, 1);
};

const handleSearchesAdd = () => {
  searches.value.push({ search: "" });
};

const handleOptionsDelete = (index: number) => {
  dnsOptions.value.splice(index, 1);
};

const handleOptionsAdd = () => {
  dnsOptions.value.push({ name: "", value: "" });
};

const handleAliasDelete = (index: number) => {
  hostAlias.value.splice(index, 1);
};

const handleAliasAdd = () => {
  hostAlias.value.push({ ip: "", hostNames: "" });
};

const handleNameserversAdd = () => {
  dnsNameServers.value.push({ server: "" });
};

const handleNameserversDelete = (index: number) => {
  dnsNameServers.value.splice(index, 1);
};

const checkHostDnsValid = (item: string) => {
  if (podSpec.value.hostPID && podSpec.value.shareProcessNamespace) {
    ElNotification.error({
      title: t("commons.message_box.prompt"),
      message: "shareProcessNamespace 和 hostPID 不能同时为 true"
    });

    if (item === "hostPID") {
      podSpec.value.hostPID = null;
    } else {
      podSpec.value.shareProcessNamespace = null;
    }
  }
};

onMounted(() => {
  if (podSpec.value) {
    hostAlias.value =
      podSpec.value?.hostAliases?.map(item => ({
        ip: item.ip,
        hostNames: item.hostnames?.join(",") ?? ""
      })) ?? [];

    dnsNameServers.value =
      podSpec.value.dnsConfig?.nameservers?.map(item => ({
        server: item
      })) ?? [];

    searches.value = podSpec.value.dnsConfig?.searches?.map(item => ({
      search: item
    }));
  }
});
</script>
